<script setup>
import { useEchartsOperations } from '@/hooks/useEchartsOperations.js'
import { getCurrentInstance, onMounted } from 'vue'
import { getSellerData } from '@/api/index.js'

const app = getCurrentInstance()
const echarts = app.appContext.config.globalProperties.$echarts

const {
  chart,
  updateChart,
  fetchData,
  data,
  totalPage,
  page,
  pageSize,
  chartInstance,
  titleFontSize,
  startTimer
} = useEchartsOperations()

updateChart.value = () => {
  totalPage.value = Math.ceil(data.value.length / 5)
  const showData = data.value.slice(
    (page.value - 1) * pageSize.value,
    page.value * pageSize.value
  )
  const initOption = {
    dataset: {
      source: showData
    },
    title: {
      text: '😜商家销售统计',
      textStyle: {
        fontsize: titleFontSize.value
      },
      left: 20,
      top: 20
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true // 包含坐标轴的刻度标签
    },
    yAxis: {
      type: 'category'
    },
    xAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        z: 0,
        lineStyle: {
          color: '#2D3443',
          width: titleFontSize.value,
          type: 'solid'
        }
      }
    },
    series: [
      {
        name: '销量',
        type: 'bar',

        barWidth: titleFontSize.value,
        label: {
          show: true,
          position: 'right',
          color: 'white'
        },
        itemStyle: {
          borderRadius: [0, 33, 33, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#5052EE' },
            { offset: 1, color: '#AB6EE5' }
          ])
        }
      }
    ]
  }
  chartInstance.value.setOption(initOption)
}
fetchData.value = async () => {
  const res = await getSellerData()
  data.value = res.data
  updateChart.value()
}
onMounted(() => {
  startTimer()
})
</script>

<template>
  <div class="com-container">
    <div class="com-chart" ref="chart"></div>
  </div>
</template>

<style scoped></style>
